<template>
  <div>
    <!-- 返回箭头 -->
    <router-link type="div" to="/">
      <div class="back" v-show="!isShowHeader"><span class="iconfont">&#xe602;</span></div>
    </router-link>
    <!-- 头部区域 -->
    <div class="header" v-show="isShowHeader" :style="opactiyStyle">
      <!-- 头部左箭头 -->
      <router-link to="/" type="div">
        <span class="header-back iconfont">&#xe602;</span>
      </router-link>
      <!-- 标题 -->
      <span>千岛湖梦想1号游船</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShowHeader: false,
      opactiyStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    handleScroll () {
      console.log(111)
      this.isShowHeader = true
      /* document.ELement获取根元素html */
      /* 兼容手机浏览器 */
      let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
      switch (true) {
        case (top === 0):
          this.isShowHeader = false
          break
        case (top > 200):
          this.isShowHeader = true
          this.opactiyStyle.opacity = 1
          break
        case (top <= 200):
          this.opactiyStyle.opacity = 1 / 200
          this.opactiyStyle.opacity = this.opactiyStyle.opacity * top
          break
        default:
          break
      }
    }
  },
  /* keepalive页面加载钩子函数，但是这样写的话会有一个bug。这个bug会导致只要页面发生滚动就会触发这个事件，不管是不是路由在当前页面 */
  /* 但是后面把keepalive加上了exclude属性,所以这里不用activated,用mountd */
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  /* 未解决这个bug所以要在退出页面的时候移除这个事件绑定 */
  /* 所以这里也换成了destroyed */
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header {
  z-index: 5
  height: $headerHeight;
  background-color: $bgColor;
  line-height: $headerHeight;
  text-align: center;
  color: #fff;
  font-size: 0.32rem;
  position: fixed;
  top:0
  left:0
  right:0
}
.back {
  z-index: 2
  border-radius: 50%
  background-color: rgba(0,0,0,0.5)
  width: .72rem
  height: .72rem
  position: absolute
  top: 0.1rem
  left: 0.1rem
  display:flex
  justify-content: center
  align-items: center
  span {
    color: #FFF
    font-size: 0.4rem

  }
}
.header-back {
  font-size: 0.4rem;
  position: absolute;
  left: 0.2rem
  color: #fff;
}
</style>
